<template>
  <div id="manage">
    <ul class="ul">
      <li><span>姓名</span><span>{{adminInfo.user_name}}</span></li>
      <li><span>注册时间</span><span>{{adminInfo.create_time}}</span></li>
      <li><span>管理员权限</span><span>{{adminInfo.admin}}</span></li>
      <li><span>管理员ID</span><span>{{adminInfo.id}}</span></li>
      <li>
        <span>更换头像：</span>
        <el-upload
          class="avatar-uploader"
          :action="baseUrl + '/admin/update/avatar/' + adminInfo.id"
          :show-file-list="false"
          :on-success="uploadImg"
          :before-upload="beforeImgUpload">
          <img v-if="adminInfo.avatar" :src="imgPath + adminInfo.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </li>
    </ul>
  </div>
</template>
<script>
  import api from '@/api/center'
  import store from '@/store'


  export default {
    data() {
      return {
        imgPath: '',//头像地址
        baseUrl: '',//服务器地址
        adminInfo: {},//管理员
      }
    },
    mounted: function () {
      this.imgPath = this.$store.state.imgPath;
      this.baseUrl = this.$store.state.path;
      api.queryAdminInfo().then(res => {
        this.adminInfo = res.data;
      });
    },
    methods: {
      uploadImg(res, file) {
        if (res.status == 1) {
          this.adminInfo.avatar = res.image_path;
          let params = {
            avatar: res.image_path
          };
          store.commit('saveAdminInfo', params);
        } else {
          this.$message.error('上传图片失败！');
        }
      },
      beforeImgUpload(file) {
        const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isRightType) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isRightType && isLt2M;
      },
    },
  }
</script>
<style lang="stylus" scoped>
  .manage {
    width 100%
    margin 20px 220px
  }

  .ul {
    background #ece7e0
    padding 20px 80px
    li {
      height 100px
      line-height 100px
      font-size 16px
      color #666
      span:nth-child(1) {
        display inline-block
        width 120px
      }
      span:nth-child(2) {
        margin-left 140px
      }
    }
    .avatar-uploader{
      display inline-block
      margin-left 140px
    }
    .avatar {
      display inline-block
      width 60px
      height 60px
    }
  }
</style>
